<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="../../mytags.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <t:base type="jquery"></t:base>
    <script type="text/javascript" src="${webRoot}js/jquery.raty.js"></script>
    <script type="text/javascript" src="webpage/com/wx/added_product/procurement/shoppingCar.js"></script>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>服务评价</title>
    <script type="text/javascript" charset="utf-8">
        mui.init();

        function goEvaluateDetail(serviceId) {
            mui.openWindow({
                createNew: true,
                url: "cbsInspectionEvaluateController.do?goRepairEvaluateDetail&serviceId=" + serviceId
            })
        }

        function goEvaluate(id) {
            mui.openWindow({
                createNew: true,
                url: "cbsInspectionEvaluateController.do?goRepairEvaluate&id=" + id
            })
        }
    </script>
    <style>
        hr {
            margin: 0 !important;
        }

        .mui-navigate-right:after, .mui-push-right:after {
            font-size: 1.8em;
        }

        .mui-push-left:after {
            font-size: 1.8em;
        }

        .c6 div {
            line-height: 30px;
        }

        .pj {
            width: 46%;
            float: left
        }

        .pj span {
            font-size: 12px;
        }
    </style>
</head>
<body>
<div class="tel"><a href="tel:400-88-22726"> <img src="${webRoot }images/tel.jpg"></a></div>
<div class="geren" style="font-weight: bold;margin-bottom: 10px;">
    <img src="${webRoot }/images/about.jpg">服务评价
</div>
<div class="mui-card" style="width:100%;margin: 0;border-radius: 0;margin-bottom:60px; background:none;">
    <ul class="mui-table-view ul-detail" style="background:none;">
        <c:if test="${not empty qrs}">
            <c:forEach var="ins" items="${qrs}">
                <div style="margin-bottom:10px; background:#fff;margin-top: 2px">
                    <li>
                        <div class="li-title" style="padding-bottom: 0px;padding-top: 0px">&emsp;服务申请号
                            <span>${ins.code}</span>&emsp;&emsp;&emsp;
                            <c:if test="${ins.evaluateState=='1'}">
                                <button style="color: #0e78c9" onclick="goEvaluateDetail('${ins.id}')">查看评价</button>
                            </c:if>
                            <c:if test="${ins.evaluateState!='1'}">
                                <button style="color: #0e90d2;width: 80px" id="goEvaluate"
                                        onclick="goEvaluate('${ins.id}')">未评价
                                </button>
                            </c:if>
                        </div>
                    </li>
                    　　　　　　
                    <li class="mui-table-view-cell cell1 c6" style="padding-top: 0px">
                        <span style="margin-right: 5px;font-size: 15px">服务评价</span>
                        <div class="pfx">
                            <h4>
                                <div id="lastEvaluate" class="raty" data-score="${ins.lastEvaluate}"></div>
                            </h4>
                            <div class="mui-clearfix"></div>
                                <%--<h3>5分制：1-很不满意;2-略有不满;3-一般;4-满意;5-非常满意</h3>--%>
                        </div>
                    </li>
                    <hr class="title-hr"/>
                </div>
            </c:forEach>
        </c:if>
        <c:if test="${empty qrs}">
            <li class="mui-table-view-cell">
                无相关报修服务单
            </li>
        </c:if>
    </ul>
</div>
<div class="btn-buttom auto-url" data-href="loginWxController.do?goPersionalCenterServiceMenu">
    我的服务单
</div>
<script type="text/javascript">
    $(function () {
        mui.init();
        $.fn.raty.defaults.path = '${webRoot}js/img';
        $('.raty').each(function () {
            $(this).raty({readOnly: true, number: 5, score: $(this).attr("data-score")}).css('width', 5 * 40);
        })

    })
</script>
</body>
</html>